<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/login.css">
    <script type="text/javascript">
        $(function () {
            $("#username").change(function () {
                //使用ajax 做username 的异步验证 checkUsername?username=xxxx
                $.get("user/checkUser", "username=" + this.value, function (data) {//data是一个实体类对象
                    // if(data==1){
                    // 	$("#usernameMsg").html("用户名已经存在").css("color","red");
                    // 	$("#registerBtn").attr("disabled",true);
                    // }else{
                    // 	$("#usernameMsg").html("用户名可用").css("color","green");
                    // 	$("#registerBtn").removeAttr("disabled");
                    // }
                    if (data.flag) {
                        //注册成功，跳转成功页面
                        // location.href = "registerSuccess.jsp";
                        $("#usernameMsg").html("用户名可用").css("color", "green");
                    } else {
                        //注册失败，给msg添加提示信息
                        $("#usernameMsg").html(data.errorMsg).css("color", "red");
                        ;
                    }

                })
            });
        });


        /*表单校验：
                1.用户名：单词字符，8-20
                2.密码：单词，8-20
                3.email：邮件格式
                5.验证码：非空
             */
        //校验用户名
        /*function checkUsername() {
            //获取用户名的value
            var username = $("#username").val();
            //定义正则
            var reg_username = /^\w{6,20}$/;
            var flag = reg_username.test(username);
            if (flag) {
                //校验正确
                $("#username").css("border", "");

            } else {
                //校验错误
                $("#username").css("border", "1px solid red");
            }

            return flag;
        }*/

        //校验密码
        /*function checkPassword() {
            //获取密码的value
            var password = $("#password").val();
            //定义正则
            var reg_password = /^\w{3,20}$/;
            var flag = reg_password.test(password);
            if (flag) {
                //校验正确
                $("#password").css("border", "");

            } else {
                //校验错误
                $("#password").css("border", "1px solid red");
            }

            return flag;
        }
    */
        //校验邮箱
        function checkEmail() {
            //获取邮箱的value
            var email = $("#email").val();
            //定义正则
            var reg_email = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
            var flag = reg_email.test(email);
            if (flag) {
                //校验正确
                $("#email").css("border", "");

            } else {
                //校验错误
                $("#email").css("border", "1px solid red");
            }

            return flag;
        }


        //校验验证码
        function checkCheck() {
            //获取验证码的value
            var check = $("#check").val();
            //定义正则
            var reg_check = /\S/;
            var flag = reg_check.test(check);
            if (flag) {
                //校验正确
                $("#check").css("border", "");

            } else {
                //校验错误
                $("#check").css("border", "1px solid red");
            }

            return flag;
        }


        //入口函数
        $(function () {
            //当表单提交时调用函数，调用所有的校验方法
            $("#registerForm").submit(function () {
                //1.发送数据导服务器
                if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday() && checkCheck()) {
                    $.post("./user/regist", $(this).serialize(), function (data) {
                        //后台响应的数据
                        if (data.flag) {
                            //注册成功，跳转成功页面
                            location.href = "register_ok.html";
                        } else {
                            //注册失败，给msg添加提示信息
                            $("#msg").html(data.errorMsg);
                        }
                    });
                }
                //2.跳转页面

                return false;
            });

            //当某一个组件失去焦点时，调用对应的校验方法
            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);
            $("#name").blur(checkName);
            $("#telephone").blur(checkTelephone);
            $("#birthday").blur(checkBirthday);
            $("#check").blur(checkCheck);
        });


    </script>
    <title>注册</title>
</head>
<body>
<div class="regist">
    <div class="regist_center">
        <div class="regist_top">
            <div class="left fl"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;会员注册</div>
            <div class="right fr">
                <a href="index.jsp" target="_black">小米商城</a>
            </div>
            <div class="clear"></div>
            <div class="xian center"></div>
        </div>
        <div class="center-block" style="margin-top: 80px;">
            <form class="form-horizontal" action="user/register" method="post">

                <div class="form-group">
                    <label class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-8" style="width: 40%">
                        <input type="text" id="username" name="username" class="form-control col-sm-10"
                               placeholder="Username" />
                    </div>
                    <div class="col-sm-2">
                        <p class="text-danger"><span class="help-block " id="usernameMsg"></span></p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-8" style="width: 40%">
                        <input type="password" name="upassword"
                               class="form-control col-sm-10" placeholder="Password" />
                    </div>
                    <div class="col-sm-2">
                        <p class="text-danger"><span id="helpBlock1" class="help-block ">请输入6位以上字符</span></p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-8" style="width: 40%">
                        <input type="password" class="form-control col-sm-10"
                               placeholder="Password Again" />
                    </div>
                    <div class="col-sm-2">
                        <p class="text-danger"><span id="helpBlock2" class="help-block ">两次密码要输入一致哦</span></p>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-8" style="width: 40%">
                        <input type="text" name="email" id="email" class="form-control col-sm-10"
                               placeholder="Email" />
                    </div>
                    <div class="col-sm-2">
                        <p class="text-danger"><span id="helpBlock3" class="help-block ">填写正确邮箱格式</span></p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-8" style="width: 40%">
                        <label class="radio-inline"> <input type="radio"
                                                            name="usex" value="男"> 男
                        </label> <label class="radio-inline"> <input type="radio"
                                                                     name="usex" value="女"> 女
                    </label>
                    </div>
                    <div class="col-sm-2">
                        <p class="text-danger"><span id="helpBlock4" class="help-block ">你是帅哥 还是美女</span></p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-8" style="width: 40%">
                        <label class="radio-inline"> <input type="text"
                                                            name="checkCode" placeholder="输入验证码">
                        </label> <label class="radio-inline"> <img src="checkCode" alt="">
                    </label>
                    </div>
                    <div class="col-sm-2">
                        <p class="text-danger"><span id="helpBlock5" class="help-block ">你是帅哥 还是美女</span></p>
                    </div>
                </div>
                <hr>
                <div class="form-group">
                    <div class="col-sm-7 col-sm-push-2">
                        <input id="registerBtn" type="submit" value="注册" class="btn btn-primary  btn-lg" style="width: 200px;" /> &nbsp; &nbsp;
                        <input type="reset" value="重置" class="btn btn-default  btn-lg" style="width: 200px;"  />
                    </div>
                </div>
                <div>${requestScope.registerMsg}</div>
            </form>

        </div>
    </div>
</div>

</body>
</html>